<template>
  <div>
    <a-form-model
      ref="taskForm"
      :model="taskForm"
      :rules="taskRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-card title="案件详情" :loading="loading">
        <template slot="extra">
          <a-button type="primary" @click="onUpload" style="margin-right: 10px" v-if="uploadForm.patenteer.filename">上传定稿文件</a-button>
          <a-button type="danger" @click="onUpload" style="margin-right: 10px" v-else>上传定稿文件</a-button>
          <a-button type="primary" @click="makePdf">生成PDF</a-button>
        </template>
        <!--      <template slot="extra">-->
        <!--        <a-button type="primary">保存业务</a-button>-->
        <!--        <a-button style="margin-left: 5px;">重置表单</a-button>-->
        <!--      </template>-->
        <a-row :gutter="20">
          <!--        <a-col :span="12">-->
          <!--          <a-card title="基本信息">-->
          <!--            <a-form-model-item label="申请号/专利号">-->
          <!--              <a-input v-model="businessForm.zl_no" placeholder="输入申请号/专利号" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="专利名称">-->
          <!--              <a-input v-model="businessForm.zl_name" placeholder="输入申专利名称" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="申请人/专利权人">-->
          <!--              <a-input v-model="businessForm.customer_name" placeholder="输入申请人/专利权人" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="专利状态">-->
          <!--&lt;!&ndash;              <a-select&ndash;&gt;-->
          <!--&lt;!&ndash;                show-search&ndash;&gt;-->
          <!--&lt;!&ndash;                v-model="businessForm.zl_state"&ndash;&gt;-->
          <!--&lt;!&ndash;                placeholder="选择专利当前状态"&ndash;&gt;-->
          <!--&lt;!&ndash;                :filter-option="filterOption"&ndash;&gt;-->
          <!--&lt;!&ndash;              >&ndash;&gt;-->
          <!--&lt;!&ndash;                <a-select-option v-for="(item,index) in businessOpts" :key="index" :value="item">{{item}}</a-select-option>&ndash;&gt;-->
          <!--&lt;!&ndash;              </a-select>&ndash;&gt;-->
          <!--              <a-input v-model="businessForm.zl_state" placeholder="请关联专利状态" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="申请日">-->
          <!--              <a-date-picker v-model="businessForm.created_at"/>-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="合同编号">-->
          <!--              <a-input v-model="businessForm.contract_no" placeholder="请关联合同号" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="业务编号">-->
          <!--              <a-input v-model="businessForm.business_no" placeholder="请关联业务号" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="业务类别">-->
          <!--              <a-input v-model="businessForm.zl_type" placeholder="请关联业务号" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="业务名称">-->
          <!--              <a-input v-model="businessForm.business_name" placeholder="请关联业务号" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="联系电话">-->
          <!--              <a-input v-model="businessForm.phone" placeholder="请关联联系电话" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="价格">-->
          <!--              <a-input-number v-model="businessForm.price" placeholder="请关联业务号" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="官费">-->
          <!--              <a-input-number v-model="businessForm.official_fee" placeholder="请关联业务号" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="所属顾问">-->
          <!--&lt;!&ndash;              <a-select&ndash;&gt;-->
          <!--&lt;!&ndash;                show-search&ndash;&gt;-->
          <!--&lt;!&ndash;                v-model="businessForm.username"&ndash;&gt;-->
          <!--&lt;!&ndash;                placeholder="请选择所属顾问"&ndash;&gt;-->
          <!--&lt;!&ndash;                :filter-option="filterOption"&ndash;&gt;-->
          <!--&lt;!&ndash;              >&ndash;&gt;-->
          <!--&lt;!&ndash;                <a-select-option value="jack">&ndash;&gt;-->
          <!--&lt;!&ndash;                  Jack&ndash;&gt;-->
          <!--&lt;!&ndash;                </a-select-option>&ndash;&gt;-->
          <!--&lt;!&ndash;              </a-select>&ndash;&gt;-->
          <!--              <a-input v-model="businessForm.username" placeholder="请关联所属顾问" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--            <a-form-model-item label="专利师/撰写人">-->
          <!--&lt;!&ndash;              <a-select&ndash;&gt;-->
          <!--&lt;!&ndash;                show-search&ndash;&gt;-->
          <!--&lt;!&ndash;                v-model="businessForm.patenteer"&ndash;&gt;-->
          <!--&lt;!&ndash;                placeholder="请选择专利师/撰写人"&ndash;&gt;-->
          <!--&lt;!&ndash;                :filter-option="filterOption"&ndash;&gt;-->
          <!--&lt;!&ndash;              >&ndash;&gt;-->
          <!--&lt;!&ndash;                <a-select-option value="jack">&ndash;&gt;-->
          <!--&lt;!&ndash;                  Jack&ndash;&gt;-->
          <!--&lt;!&ndash;                </a-select-option>&ndash;&gt;-->
          <!--&lt;!&ndash;              </a-select>&ndash;&gt;-->
          <!--              <a-input v-model="businessForm.patenteer" placeholder="请关联专利师" type="text" />-->
          <!--            </a-form-model-item>-->
          <!--          </a-card>-->
          <!--        </a-col>-->
          <a-col :span="12">
            <a-card title="业务材料">
              <template slot="extra">
                <a-upload
                    name="file"
                    :multiple="true"
                    :headers="headers"
                    :action="uploadUrl"
                    :show-upload-list="false"
                    @change="onChange"
                  >
                  <a-button type="danger"> <a-icon type="upload" />上传委托书</a-button>
                </a-upload>
                <a-button size="small" type="danger" icon="download" @click="batchDownload">批量下载</a-button>
              </template>
              <a-alert>
<!--                <template slot="message">-->
<!--                  整理后的材料：<a @click="download(businessForm.mat_file, businessForm.mat_filename)">{{businessForm.mat_filename}}</a>-->
<!--                </template>-->
                <template slot="message">
                  所属顾问：{{businessForm.username}}
                </template>
              </a-alert>
              <a-divider />
              <a-form-model :model="materialForm">
                <a-form-model-item v-for="(item,index) in materialForm" :key="index" :label="item.label">
                  <div v-if="item.type === 'text'">
                    <a-input v-model="item.value" disabled/>
                  </div>
                  <div v-if="item.type === 'textarea'">
                    <a-textarea :rows="4" v-model="item.value"></a-textarea>
                  </div>
                  <div v-if="item.type === 'select'">
                    <a-select v-model="item.value">
                      <a-select-option v-for="(item,index) in item.items" :key="index" :value="index">{{ item }}</a-select-option>
                    </a-select>
                  </div>
                  <div v-if="item.type === 'radio'">
                    <a-radio-group v-model="item.value">
                      <a-radio v-for="(item,index) in item.items" :key="index" :value="index">
                        {{ item }}
                      </a-radio>
                    </a-radio-group>
                  </div>
                  <div v-if="item.type === 'image'">
                    <div v-if="item.value">
                      <img style="width: 40px; height: 40px;cursor: pointer" :src="item.value" @click="handlePreview(item.value)">
                      <a-button size="small" type="link" icon="download" @click="download(item.value, item.filename)"></a-button>
                    </div>
                  </div>
                  <div v-if="item.type === 'file'">
                    <a-button
                      v-if="item.value"
                      size="small"
                      type="link"
                      icon="download"
                      @click="download(item.value, item.filename)"
                    >
                      {{item.filename}}
                    </a-button>
                  </div>
                  <div v-if="item.type === 'file-xls'">
                    <a-button v-if="item.value" size="small" type="link" icon="download" @click="() => download(item.value, item.filename)">{{item.filename}}</a-button>
                  </div>
                </a-form-model-item>
<!--                <a-form-model-item>-->
<!--                  <a-button style="float:right" type="primary" @click="onSubmit">保存</a-button>-->
<!--                </a-form-model-item>-->
              </a-form-model>
              <!--            <a-descriptions :column="1">-->
              <!--              <a-descriptions-item v-for="(item,index) in mats" :key="index" :label="item.mat_name">-->
              <!--                <div v-if="item.type === 'text'">-->
              <!--                  <a-button-->
              <!--                    v-if="item.value"-->
              <!--                    size="small"-->
              <!--                    type="link"-->
              <!--                    icon="copy"-->
              <!--                    class="copy"-->
              <!--                    :data-clipboard-text="item.value"-->
              <!--                    @click="copy"-->
              <!--                  >-->
              <!--                    {{item.value}}-->
              <!--                  </a-button>-->
              <!--                </div>-->
              <!--                <div v-if="item.type === 'image'">-->
              <!--                  <div v-if="item.value">-->
              <!--                    <img style="width: 40px; height: 40px;cursor: pointer" :src="item.value" @click="handlePreview(item.value)">-->
              <!--                    <a-button size="small" type="link" icon="download" @click="() => window.open(item.value)"></a-button>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--                <div v-if="item.type === 'file'">-->
              <!--                  <a-button-->
              <!--                    v-if="item.value"-->
              <!--                    size="small"-->
              <!--                    type="link"-->
              <!--                    icon="download"-->
              <!--                    @click="() => window.open(item.value)"-->
              <!--                  >-->
              <!--                    {{item.filename}}-->
              <!--                  </a-button>-->
              <!--                </div>-->
              <!--                <div v-if="item.type === 'file-xls'">-->
              <!--                  <a-button v-if="item.value" size="small" type="link" icon="download" @click="() => window.open(item.value)">{{item.filename}}</a-button>-->
              <!--                </div>-->
              <!--              </a-descriptions-item>-->
              <!--            </a-descriptions>-->
            </a-card>
            <!--          <a-card title="流转记录" style="margin-top:20px">-->
            <!--            <a-timeline>-->
            <!--              <a-timeline-item v-for="item in historyData" :key="item.circul_id">{{item.step}} {{item.username}}，{{item.notes}} {{item.created_at}} <a :href="item.file">{{item.filename}}</a></a-timeline-item>-->
            <!--            </a-timeline>-->
            <!--          </a-card>-->
          </a-col>
          <a-col :span="12">
            <a-card title="后续进展">
              <a-timeline>
                <a-timeline-item v-for="item in stateData" :key="item.cb_id">{{item.state_name}}<a @click="download(item.file, item.filename)" v-if="item.state_name === '补正' || item.state_name === '授权'">【<a-icon type="download" /> {{item.filename}}】</a> {{item.created_at}}</a-timeline-item>
              </a-timeline>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </a-form-model>
    <a-modal
      centered
      title="上传专利师定稿文件"
      :confirm-loading="loading"
      v-model="uploadVisible"
      @ok="submitUpload"
    >
      <a-form-model
        :model="uploadForm"
      >
<!--        <a-form-model-item label="业务名称">-->
<!--          <a-input disabled v-model="uploadForm.business_name" type="text" />-->
<!--        </a-form-model-item>-->
        <a-form-model-item label="上传专利师定稿文件">
          <a-upload
            name="file"
            accept=".rar,.zip,.7z"
            :multiple="true"
            :headers="headers"
            :action="uploadUrl"
            :show-upload-list="false"
            @change="onChange"
          >
            <a-button type="danger"> <a-icon type="upload" />上传定稿文件</a-button>
          </a-upload>
        </a-form-model-item>
        <a-button v-if="uploadForm.patenteer" size="small" type="link" icon="download" @click="download(uploadForm.patenteer.file, uploadForm.patenteer.filename)">{{uploadForm.patenteer.filename}}</a-button>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import { batchDownload, getCaseUpload, getProcessDetail2, postCaseUpload, postProcessDetail2 } from '@/api/patent.process'
import apis from '@/api'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  name: 'TaskDetail',
  data () {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 15 },
      taskForm: {},
      taskRules: {},
      businessForm: {},
      categoryOpts: {},
      businessOpts: {},
      historyData: [],
      mats: {},
      loading: true,
      previewImage: '',
      previewVisible: false,
      uploadUrl: apis.Upload,
      headers: {
        'Access-Token': storage.get(ACCESS_TOKEN)
      },
      materialForm: {},
      uploadForm: {},
      uploadVisible: false,
      stateData: {}
    }
  },
  activated () {
    const form = {}
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.loading = true
      getProcessDetail2(id).then(res => {
        if (res.status === 0) {
          this.businessForm = res.result.contract_business
          this.categoryOpts = res.result.business_category_opts
          this.businessOpts = res.result.business_opts
          this.historyData = res.result.histories
          this.stateData = res.result.states
          this.mats = res.result.mat_fields
          for (const k in res.result.mat_fields) {
            form[res.result.mat_fields[k].name] = res.result.mat_fields[k]
          }
          this.materialForm = form
        }
      }).finally(() => {
        this.loading = false
      })
      getCaseUpload(id).then(res => {
        this.uploadForm = res.result
        this.uploadForm['cb_id'] = id
      })
    }
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    handlePreview (file) {
      this.previewImage = file
      this.previewVisible = true
    },
    handleCancel () {
      this.previewVisible = false
    },
    copy (e) {
      const clipboard = new Clipboard('.copy')
      clipboard.on('success', e => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },
    makePdf () {
      this.$warning({
        title: '功能待开发'
      })
    },
    batchDownload () {
      batchDownload(this.$route.params.id).then(res => {
        if (res.status === 0) {
          window.open(res.result.fileUrl)
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    onUpload () {
      // const id = this.$route.params.id
      // getCaseUpload(id).then(res => {
      //   this.uploadForm = res.result
      //   this.uploadForm['cb_id'] = id
      //   this.uploadVisible = true
      // })
      this.uploadVisible = true
    },
    submitUpload () {
      const app = this
      const data = {}
      data['patenteer[file]'] = app.uploadForm.patenteer.file
      data['patenteer[filename]'] = app.uploadForm.patenteer.filename
      postCaseUpload(app.$route.params.id, data).then(res => {
        if (res.status === 0) {
          app.uploadVisible = false
          app.$refs.table.refresh()
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return false
      }
      if (info.file.status === 'done') {
        this.uploadForm.patenteer.filename = info.file.name
        this.uploadForm.patenteer.file = info.file.response.result.url
        this.loading = false
      }
    },
    download (value, filename) {
      window.open(apis.Download + '?value=' + value + '&filename=' + filename)
    },
    onSubmit () {
      const app = this
      const form = Object.assign(app.materialForm)
      const _form = {}
      for (const k in form) {
        if (form[k].name2) {
          _form[form[k].name2] = form[k].filename
        }
        _form[form[k].name] = form[k].value
      }
      postProcessDetail2(app.$route.params.id, _form).then(res => {
        if (res.status === 0) {
          app.$message.success('保存成功！')
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
